<template>
    <div class="SearchBox">
        <a-input class="inpt"  placeholder="搜索课程"/>
        <div class="search">
            <a-icon class="fangDa" type="search" />
            <button>搜索</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Search"
    }
</script>

<style scoped>
    .SearchBox{
        margin: 30px 6px 0 0;
        width: 400px;
    }
    .inpt{
        float: left;
        width: 255px;
        height: 30px;
        font-size: 13px;
        border-radius: 20px;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }
    .search:hover{
        cursor: pointer;
    }
    .search{
        position: relative;
        float: left;
        width: 83px;
    }
    .search>button{
        width: 80%;
        height: 30px;
        font-size: 13px;
        color: white;
        text-indent: 1rem;
        background: rgb(0, 207, 140);
        border: none;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }
    .fangDa{
        position: absolute;
        top: 8px;
        left: 8px;
        color: white;
    }
    .search>button:hover{
        cursor: pointer;
    }
</style>